<template>
  <view class="content">
    <view class="search-content">
      <view class="search-input-txt">
        <input
          v-model="form.inputValue"
          placeholder-class="ph-sty"
          class="searchInput font-14"
          type="search"
          confirm-type="搜索"
          placeholder="请输入关键词"
          @confirm="searchConfirm"
        >
        <image
          v-if="!form.inputValue"
          :src="require('@/static/public/otherSearch.png')"
          class="other-search"
        />
      </view>
      <view
        class="searchBtn"
        @click="btnConfirm"
      >
        搜索
      </view>
    </view>
    <view
      v-if="searchHistoryList.length"
      class="search-history-content"
    >
      <view class="search-history-top">
        <view class="search-title">
          历史搜索
        </view>
        <image
          class="delete"
          :src="require('@/static/public/delete.png')"
          @click="deleteHistory"
        />
      </view>
      <view
        class="search-history"
        :class="{hide: hideTab}"
      >
        <!-- <view v-if="hideTab" class="op" @click="openTab">展开</view> -->
        <block
          v-for="(t, index) in searchHistoryList"
          :key="index"
        >
          <text @click="searchConfirm(`${t}`)">
            {{ t }}
          </text>
        </block>
      </view>
    </view>
    <view
      v-if="searchHotList.length"
      class="search-find"
    >
      <view class="search-title">
        搜索发现
      </view>
      <view class="search-history">
        <block
          v-for="(t, index) in searchHotList"
          :key="index"
        >
          <text @click="searchConfirm(`${t}`)">
            {{ t }}
          </text>
        </block>
      </view>
    </view>
    <view class="recommend">
      <view class="recommend-title">
        热门推荐
      </view>
      <my-waterfall
        :list="list"
      />
    </view>
  </view>
</template>

<script>
	import myWaterfall from '@/components/my-waterfall/index.vue';
	export default {
		components: {
			myWaterfall
		},
		data() {
			return {
				form: {
					inputValue: ''
				},
				list: [],
				searchHistoryList: [],
				searchHotList: [],
				hideTab: false,
				page: {
					page_size: 10,
					current_page: 1,
					count: 0,
				},
				type: 'goods',
				urlType: {
					goods: '/productPages/goods/list',
					route: '/productPages/route/list',
					team: '/productPages/team/list'
				},
        filterType: ''
			};
		},
		onLoad(e) {
			if(e && e.type) {
				this.type = e.type;
        if(e.type === 'route') {
          this.filterType = 'ROUTE';
        }
        if(e.type === 'team') {
          this.filterType = 'BUILD';
        }
			}
			this.list = [];
			this.page.current_page = 1;
			this.queryData();
			this.queryFindData();
		},
		mounted() {
			console.log('mounted', this.$store.state.historyList);
			this.searchHistoryList = this.$store.state.historyList;
		},
		onReachBottom() {
			if (this.list.length && this.list.length < this.page.count) {
				this.queryData();
			}
		},
		methods: {
			// 列表获取
			queryData(status) {
				uni.showLoading({
					title: '加载中'
				});
				this.$ajax({
					method: 'get',
					url: '/outing/mobile/goods/search',
					data: {
            hot: 'Y',
            type: this.filterType,
						...this.page
					}
				}).then(res => {
					res.data.forEach((t) => {
						t.tagList = t.tag ? JSON.parse(t.tag) : [];
						if(t.price && t.price > 10000) {
							t.price = (t.price/1000).toString().slice(0,4) + '万+';
						}
						if(t.sellNumber && t.sellNumber > 10000) {
							t.sellNumber = (t.sellNumber/1000).toString().slice(0,4) + '万+';
						}
					});
					this.list.push.apply(this.list, res.data);
					this.page.count = res.count;
					uni.hideLoading();
					this.page.current_page += 1;
					if (status === 'refresh') {
						uni.stopPullDownRefresh();
					}
				}).catch(() => {
					uni.hideLoading();
				});
			},
			queryFindData() {
				this.$ajax({
					method: 'get',
					url: '/outing/mobile/search/listByPage',
          data: {
            page_size: 9999999
          }
				}).then(res => {
					if(res.data) {
						const taglist = res.data.map(item => item.tagValue);
						this.searchHotList = taglist;
					}
				});
			},
			searchConfirm(e) {
				if (e) {
					this.form.inputValue = typeof e === 'object' ? e.detail.value : e;
				}
				if (this.form.inputValue) {
					let arr = this.$store.state.historyList;
					for (let i in arr) {
						if (arr[i] == this.form.inputValue) {
							arr.splice(i, 1);
						}
					}
					arr.unshift(this.form.inputValue);
					arr.splice(12); // 只保留 12 条搜索记录
          const val = arr.filter(i=>i && i.trim()); // 过滤空格搜索
					this.searchHistoryList = val;
					this.$store.commit('changeHistoryList', val);
					if(this.type && this.urlType[this.type]) {
						// const city = this.$store.state.storeCity || ''; // 去除城市过滤
						let url = this.urlType[this.type] + `?name=${this.form.inputValue}`;
            // 线路产品特殊处理
            if(this.type === 'route' && this.$store.state.searchForm !== {}) {
              const { startCity='', endCity='', days='', price='', cateId='', title='' } = this.$store.state.searchForm;
              // url = `/productPages/route/list?name=${this.form.inputValue}&startCity=${startCity}&endCity=${endCity}&days=${days}&price=${price}&cateId=${cateId}&title=${title}`;
              url = `/productPages/route/list?name=${this.form.inputValue}&cateId=${cateId}&title=${title}`; // 先不做记录处理
            }
            // 团建产品特殊处理
            if(this.type === 'team' && this.$store.state.searchForm !== {}) {
              const { title='', cateId='' } = this.$store.state.searchForm;
              url = `/productPages/team/list?name=${this.form.inputValue}&cateId=${cateId}&title=${title}`;
            }
						uni.navigateTo({
							url
						});
					}
				} else {
          uni.showToast({title: '请输入关键词'});
        }
			},
			btnConfirm() {
				this.searchConfirm();
			},
			openTab() {
				this.hideTab = false;
			},
			deleteHistory() {
				this.searchHistoryList = [];
				this.$store.commit('changeHistoryList', []);
			}
		}
	};
</script>
<style lang="less" scoped>
	.search-content {
		display: flex;
		align-items: center;
		padding: 20rpx;

		.search-input-txt {
			// flex: 1;
			position: relative;
			overflow: hidden;
			border-left: 0;
			border-radius: 35rpx;
			height: 70rpx;
			// width: 580upx;

			.searchInput {
				flex: 1;
				line-height: 70upx;
				width: 410upx;
				height: 70upx;
				background: #F4F4F4;
				padding: 0 85upx;
				border-radius: 35upx;
				position: relative;
				font-size: 28upx;
			}

			.other-search {
				width: 25rpx;
				height: 25rpx;
				position: absolute;
				top: 48%;
				left: 50rpx;
				transform: translate(0, -50%);
			}
		}

		.searchBtn {
			width: 90rpx;
			height: 48rpx;
			font-size: 26rpx;
			font-weight: 500;
			font-family: PingFangSC-Medium, PingFang SC;
			color: #333333;
			line-height: 37rpx;
			background: linear-gradient(138deg, #FFE955 0%, #FFD302 100%);
			border-radius: 100rpx;
			margin-left: 20rpx;
			padding: 6rpx 19rpx;
		}
	}
	
	.search-history-top {
		display: flex;
		justify-content: space-between;
		padding-top: 2rpx;
	
		.delete {
			width: 30rpx;
			height: 30rpx;
		}
	}
	
	.search-title {
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 33rpx;
	}
	
	.hide {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.search-history {
		margin: 20rpx 0;
		position: relative;
		&:before{
		  content: '';
		  float: right;
		  width: 0; /*设置为0，或者不设置宽度*/
		  height: 70rpx;
		}
		
		.op {
			float: right;
			clear: both;
			display: inline-block;
			line-height: 33rpx;
			padding: 11rpx 0;
			font-size: 24rpx;
			color: #555;
			// background: rgba(0, 0, 0, 0.04);
			border-radius: 33rpx;
		}
		
		text {
			display: inline-block;
			line-height: 33rpx;
			padding: 11rpx 30rpx;
			font-size: 24rpx;
			color: #555;
			background: rgba(0, 0, 0, 0.04);
			border-radius: 33rpx;
			margin: 0 15rpx 15rpx 0;
		}
	}

	.search-history-content {
		padding: 0 30rpx 0 20rpx;
		border-bottom: 1px solid #E8E8E8;
	}
	
	.search-find {
		padding: 20rpx 30rpx 0;
	}
	
	.recommend {
		overflow: hidden;
		background: #F7F9FB;
		padding: 20rpx 30rpx;
		&-title {
			font-size: 34rpx;
			font-weight: 600;
			color: #333333;
			margin-bottom: 20rpx;
		}
	}
</style>
